<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String baseUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<base href="<%=baseUrl%>" />
<meta charset="utf-8">
<head>
<title>用户注册</title>
<link rel="stylesheet" type="text/css"
	href="static_front/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="static_front/css/font-awesome.css"> -->
<link rel="stylesheet"
	href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css"
	href="static_front/css/common.css">
<style type="text/css">
.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media ( min-width : 768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
}

html, body {
	height: 100%;
}

body {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #f5f5f5;
}

.form-signin {
	width: 100%;
	max-width: 330px;
	padding: 15px;
	margin: auto;
}

.form-signin .checkbox {
	font-weight: 400;
}

.form-signin .form-control {
	position: relative;
	box-sizing: border-box;
	height: auto;
	padding: 10px;
	font-size: 16px;
}

.form-signin .form-control:focus {
	z-index: 2;
}

.form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
</style>
</head>
<body class="text-center">
	<form class="form-signin" action="user/reg.do" method="post">
		<img class="mb-4"
			src="https://7n.w3cschool.cn/statics/images/logonew2.png" alt=""
			width="200">
		<h1 class="h3 mb-3 font-weight-normal">注册</h1>
		<h6 class="text-danger">
		${msg}
		</h6>
		<label for="inputEmail" class="sr-only">手机号</label> <input
			type="text" name="user.mobile" id="inputMobile" class="form-control" placeholder="手机号"
			required autofocus value="13880137880"> 
		<label for="inputPassword"
			class="sr-only">密码</label> <input type="password" name="user.password" id="inputPassword"
			class="form-control" placeholder="密码" value="123" required>
		
		<div class="form-inline">
			<input type="text" id="inputCode" class="form-control mr-2 col-5" placeholder="验证码"
				required> 
			<input type="button" class="form-control btn btn-secondary" value="发送验证码" id="btnSendSMS"/>
		</div>	
			
		<div class="checkbox mb-3">
			<label>
			</label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit" id="btnReg" disabled="disabled">注册</button>
		<p class="mt-5 mb-3 text-muted">&copy; 2020</p>
	</form>

	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="static_front/js/bootstrap.min.js"></script>
	<script>
	var timer;
	$(function(){
		$('#btnSendSMS').click(function(){
			var mobile = $('#inputMobile').val();
			//通过ajax调后端接口发短信，按钮变灰并且有个倒计时
			$.get("sms/send.do", {mobile:mobile}, function(data){
				if(data.code==0)
					timer = setInterval("CountDown()",1000);
				else
					alert("短信发送失败");
			});
		})

		$('#inputCode').blur(function(){
			var mobile = $('#inputMobile').val();
			var inputCode = $('#inputCode').val();
			
			$.get("sms/verify.do", {mobile:mobile, code:inputCode}, function(data){
				if(data.code==0)
					$('#btnReg').removeAttr("disabled");
				else
					alert("输入的验证码有误");
			});
		})
	  
	});
	var maxTime = 3;
	  function CountDown(){  
	    if(maxTime>=0){
	      msg = maxTime--+"秒";  
	      $('#btnSendSMS').val(msg);
	      $('#btnSendSMS').attr('disabled','disabled');
	    }  
	    else{  
	      clearInterval(timer);
	      $('#btnSendSMS').removeAttr('disabled');
	      $('#btnSendSMS').val("发送验证码");
	    }  
	  } 
	</script>
</body>
</html>